<template>
  <div id="Lately">
    <div class="Lately-title">
      <img src="../../../assets/img/lately_1.png"
           alt="">
      <div>
        <p>最近学习章节</p>
        <span>这里记录你最近学习的章节和学习时间，点击一下列表中的某一章节。即可进入相应章节继续答题 >></span>
      </div>
    </div>
    <!-- 表格 -->
    <div class="Lately-table">
      <el-table :data="tableData"
                highlight-current-row
                height="450"
                style="width: 100%">
        <el-table-column prop="good_name"
                         label="题库名">
          <template slot-scope="scope">
            <span @click="table_Change_1(scope.row.gid, scope.row)">{{ scope.row.good_name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="num"
                         align='center'
                         label="题目数量"
                         width="180">
        </el-table-column>
        <el-table-column prop="sign"
                         align='center'
                         label="当前做到第几题"
                         width="180">
        </el-table-column>
      </el-table>
    </div>
    <!-- 总进度 -->
    <div class="Lately-all">
      <p>题库题目总进度</p>
      <div>
        <span>总题数：{{allData.all?allData.all:0}}</span>
        <span>已做题数：{{allData.do?allData.do:0}}</span>
        <span>未做题数：{{allData.done?allData.done:0}}</span>
        <span>学习进度：{{allData.all_pre?allData.all_pre:'0%'}}</span>
      </div>
      <div>
        <span>正确题数：{{allData.right?allData.right:0}}</span>
        <span>答错题数：{{allData.wrong?allData.wrong:0}}</span>
        <span>正确率：{{allData.right_pre?allData.right_pre:'0%'}}</span>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: 'Lately',
  data () {
    return {
      // 表格数据
      tableData: [],
      // 题目总进度
      allData: '',
      // 点击某套题的ID
      testId: ''

    }
  },

  components: {},

  computed: {},
  mounted () {
    // 获取最新学习章节
    this.$http.study({
      phone: localStorage.getItem('mobile'),
      time: 'month'
    }).then((res) => {
      console.log(res)
      // if (res.data.code === 1) {
      this.tableData = res.data.data
      // }
    }).catch((err) => {
      console.log(err)
    })
    // 获取进度数据
    this.$http.practice({
      phone: localStorage.getItem('mobile')
    }).then((res) => {
      // console.log(res)
      // if (res.data.code === 1) {
      this.allData = res.data.data
      // }
    }).catch((err) => {
      console.log(err)
    })
  },

  methods: {
    // 点击最近学习章节
    table_Change_1 (id, zuiData) {
      if (zuiData.goods_type === 'linian') {
        this.$store.state.ccid = id
        this.$store.state.params = false
        this.$router.push({ path: '/calendar' })
      } else if (zuiData.goods_type === 'moni') {
        this.$store.state.ccid = id
        this.$store.state.params = false
        this.$router.push({ path: '/simulation' })
      } else {
        this.$store.state.ccid = id
        this.$store.state.ppid = zuiData.pid
        this.$router.push({ path: '/practise' })
      }
    }
  }
}

</script>
<style lang='less'>
#Lately {
  background: white;
  // height: calc(100% - 20px);
  padding: 10px 20px 10px 50px;
  .Lately-title {
    text-align: left;
    padding: 10px 0 30px;
    img {
      width: 66px;
      height: auto;
      margin-right: 30px;
      // vertical-align: middle;
    }
    div {
      display: inline-block;
      p {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      span {
        font-size: 14px;
        color: #999999;
      }
    }
  }
  // 表格
  .Lately-table {
    text-align: center;
    .el-table--border {
      border: none;
    }
    .el-table--border td {
      border: none;
    }
    .el-table {
      td {
        border: none;
      }
      .cell {
        span {
          cursor: pointer;
        }
      }
    }
  }
  // 总进度
  .Lately-all {
    padding: 15px 0;
    text-align: left;
    p {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    div {
      margin-bottom: 15px;
      span {
        display: inline-block;
        width: 150px;
        font-size: 14px;
        // margin-right: 50px;
      }
    }
  }
}
</style>
